<template>
<div class="indexMovieSwiper">
  <div class=" page-header swiperTitle">
    <!-- <h3>
      正在热映
      <small>
        <a href="#" style="margin:0 20px">全部正在热映>></a>
        <a href="#">即将上映>></a>
      </small> 
    </h3> -->
    <slot name="swiperTitle"></slot>
    <ul class=" list-unstyled list-inline">
      <li @click="prevSlide">
          <span class=" glyphicon glyphicon-circle-arrow-left text-info"></span>
      </li>
      <li  @click="nextSlide">
          <span class=" glyphicon glyphicon-circle-arrow-right text-info"></span>
      </li>
    </ul>
  </div>
  <div class=" swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide swiper-slide-movieInfo">
          <!--如果放图片，必须宽度100%,高度自适应 -->
          <div class="movieItem">
            <img src="../assets/swiperImg/item01.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          <div class="movieItem">
            <img src="../assets/swiperImg/item02.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          <div class="movieItem">
            <img src="../assets/swiperImg/item03.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          <div class="movieItem">
            <img src="../assets/swiperImg/item04.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          <div class="movieItem">
            <img src="../assets/swiperImg/item05.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          
        </div>
        <div class="swiper-slide">
          <div class="movieItem">
            <img src="../assets/swiperImg/item06.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div> 
          <div class="movieItem">
            <img src="../assets/swiperImg/item07.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          <div class="movieItem">
            <img src="../assets/swiperImg/item08.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          <div class="movieItem">
            <img src="../assets/swiperImg/item09.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
          <div class="movieItem">
            <img src="../assets/swiperImg/item10.jpg" alt="" class="m-img">
            <p>复仇者联盟</p>
            <button type="button" class=" btn btn-primary">选座购票</button>
          </div>
        </div>
      </div>
  </div>
</div>
  
</template>

<script>
import "swiper/dist/css/swiper.min.css";
import Swiper from "swiper";
export default {
  name: "indexMovieSwiper",
  data() {
    return {
      certifySwiper:null
    };
  },
  mounted() {
    this.certifySwiper = new Swiper(".swiper-container", {
      watchSlidesProgress: true,
      slidesPerView: "auto",
      centeredSlides: true,
      loop: true,
      loopedSlides: 5
    });
  },
  methods:{
    prevSlide(){
      this.certifySwiper.slidePrev();
    },
    nextSlide(){
      this.certifySwiper.slideNext();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../scss/common.scss";
.swiperTitle{
  margin-top: 10px;
  @include flexbox(){
    justify-content: space-between;
    align-items: flex-end;
  }
}
.movieItem {
  width: 130px;
  display: inline-block;
  overflow: hidden;
  text-align: center;
  .m-img {
    height: 182px;
    width: 100%;
    display: block;
  }
  
  margin: 0 10px;
}
.swiper-slide-movieInfo{
  text-align: center;
}

</style>
